<template>
	<!-- 商品参数选择组件 -->
	<view>
		<uni-popup ref="popupRef" type="bottom">
			<view class="popup_box bgc_fff boxs_bb">
				<view class="b_b_2 p_b_24 flexr-jsb">
					<image class="goods_chart"
						src="https://img1.baidu.com/it/u=1147992555,4285883113&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
						mode=""></image>
					<view class="color_ff0003 font_40 flex-fitem flex flex-aife"><text
							class="font_28">¥</text><text>277</text></view>
					<image @tap="popupRef.close()" class="goods_close" src="http://www.liwanying.top/applate-icon/close.png"
						mode=""></image>
				</view>
				<view class="b_b_2 p_t_16" v-for="spec in specList">
					<view class="color_333 font_28 m_b_16">
						{{ spec.name }}
					</view>
					<view class="tag" :class="{ active: activeSpec[spec.name] == item.value }" v-for="item in spec.values"
						:tagStyle="{
							margin: '0 16rpx 16rpx 0',
						}" @click="select(spec.name, item)">
						{{ item.value }}
					</view>

				</view>
				<view class="b_b_2 p_b_24 p_t_24 flexr-jsb flex-aic boxs_bb" style="height: 88rpx;margin-bottom: 32rpx;">
					<text class="font_28 color_333 m_r_8">数量</text>
					<text class="flex-fitem font_24 color_999">库存{{skuItem.stock}}</text>
					<!-- <text>库存999</text> -->
					<lyz-input-num :max="99" v-model:num="currentCount"></lyz-input-num>
				</view>
				<view class="tac">
					<lyz-button width="45%" borderColor="#ffa259" backgroundColor="#ffa259" title="加入购物车"
						@lyzTap="tapAdd"></lyz-button>&nbsp;
					<lyz-button width="45%" borderColor="#fe5572" backgroundColor="#fe5572" title="立即购买"
						@lyzTap="tapBtn"></lyz-button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import {
reactive,
	ref
} from "vue";
const emit = defineEmits(['toOrder', 'changeSpec','add'])
let popupRef = ref()
let props = defineProps({
	num: {
		type: Number,
		default: 0
	}
})

const skuList = ref([])
const specList = ref([])
const activeSpec = ref({})
const specIds = ref({})
const skuItem = ref({})
const currentCount = ref(1)
const showSku = (spec, sku) => {
	specList.value = spec
	skuList.value = sku
	popupRef.value.open()
}
const select = (name, item) => {
	activeSpec.value[name] = item.value;
	specIds.value[name] = item.id;
	skuList.value.forEach(item => {
		let flag = true;
		for (let key in specIds.value) {
			if(item.specIds.indexOf(specIds.value[key],0)==-1){
				flag=false;
			}
		}
		flag ? skuItem.value = item : ""
	});
	emit("changeSpec",{active:activeSpec.value,skuIdE:skuItem.value.id})
}
const tapBtn = () => {
	popupRef.value.close()
	emit('toOrder',currentCount.value)
}
const tapAdd = () => {
	popupRef.value.close()
	emit('add')
}
defineExpose({
	showSku
})
</script>

<style lang="scss" scoped>
.popup_box {
	padding: 32rpx 32rpx 8rpx 32rpx;
	border-radius: 16rpx 16rpx 0rpx 0rpx;
}

.goods_chart {
	width: 108rpx;
	height: 108rpx;
	border-radius: 6rpx;
	margin-right: 16rpx;
}

.goods_close {
	width: 32rpx;
	height: 32rpx;
}

.active {
	border-color: #fe5572;
	color: #fe5572;
	background-color: #FFF5EE;
}

.tag {
	text-align: center;
	font-size: 24rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
	padding: 0 20rpx;
	height: 40rpx;
	line-height: 40rpx;
	border-radius: 4rpx;
	border: 2rpx solid;

	border-color: grey;
	background-color: #fff;
	color: grey;
	margin: 0 8px 8px 0;

	&.active {
		border-color: #fe5572;
		color: #fe5572;
		background-color: #FFF5EE;
	}
}
</style>


